<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.js"></script>
	</head>
	<body>
		<div id="demo">
			<!-- v-for遍历数组 -->
			<ul>
				<li v-for="item in items">{{item.message}}</li>
			</ul>
			<!-- v-for遍历数组，包含index参数 -->
			<ul>
				<li v-for="(item,index) in items">
					{{parentMessage}}-{{index}}-{{item.message}}
				</li>
			</ul>
			<!-- v-for遍历对象 -->
			<ul>
				<li v-for="value in object" v-bind:key="value">
					{{value}}
				</li>
			</ul>
			<!-- v-for遍历对象，包含参数name -->
			<ul>
				<li v-for="(value,name) in object">
					{{name}} : {{value}}
				</li>
			</ul>
			<!-- v-for遍历对象，包含参数index -->
			<ul>
				<li v-for="(value,name,index) in object">
					{{index}}. {{name}} : {{value}}
				</li>
			</ul>
			<!-- v-for增加key -->
			<ul>
				<li v-for="(value,name,index) in object">
					{{index}}. {{name}} : {{value}}
				</li>
			</ul>
			<!-- v-for数值范围 -->
			<div>
				<span v-for="n in 10">{{n}} </span>
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#demo",
				data: {
					parentMessage: 'Parent',
					items: [{
							message: 'Foo'
						},
						{
							message: 'Bar'
						}
					],
					object: {
						title: "vue list",
						author: "cathy",
						date: new Date().toDateString()
					}
				}
			})
		</script>

	</body>
</html>
